<template>
  <div class="main">
    <!-- 调用组件  -->
    <draggable
      :options="{
        group: { name: 'site', pull: 'clone', animation: 300 },
        filter: '.undraggable',
        sort: false,
      }"
      v-model="listdata"
      class="draggable"
      @start="start"
      @end="end"
    >
      <transition-group class="group">
        <div class="filed-item" v-for="item in listdata" :key="item.id">
            <!--<i class="el-icon-cpu"></i>-->
           <!-- {colName:'',modelId:''}//必含-->
            <zhidian :info="item"></zhidian>
            <data-type-select :data-type="item.dataType" :info="item"></data-type-select>
            <text-edit :data-text="item.value"  :info="item" ></text-edit>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import TextEdit from "../../components/AInitPage/ATableRadio/textEdit";
import DataTypeSelect from "../../components/AInitPage/ATableRadio/dataTypeSelect";
import Zhidian from "../../components/AInitPage/ATableRadio/zidian";
export default {
  name: 'DraggableView',
  props: ['listdata'],
  components: {
      Zhidian,
      DataTypeSelect,
      TextEdit,
    draggable
  },
  data () {
    return {  }
  },
  methods: {
    onClick: function (item) {},
    classObject: function (item) {
      // todo
      let icon = 'el-icon-cpu' || item.icon

      // return item.icon;
    },
    end (event) {
      if (event.to.className === 'dragArea11') {
        this.$set(this.list2[ev.oldIndex], 'flag', true)
      }
    },
    start (event) {}
  }
}
</script>

<style scoped lang="less">
.main {
  overflow-y: auto;
  min-width: 180px;
}
.draggable {
  width: 100%;
  height: 100%;
}
.group {
  display: block;
  min-width: 100px;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.draggable .filed-item {
  padding: 2px 5px;
  cursor: move;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
    &:hover{
        background-color: #ffd5dc;
     }
}
.span {
  display: inline-block;
  overflow: hidden;
  width: 125px;
  white-space: nowrap;
  line-height: 1;
}
</style>
